<template>
  <div class="container">
    <!-- 表单 -->
    <el-card shadow="never">
      <!-- 按钮 -->
      <el-row type="flex" justify="end">
        <el-button
          style="margin-bottom: 10px"
          type="success"
          class="el-icon-edit"
          @click="$router.push('/questions/new')"
          >&nbsp;新增试题</el-button
        >
      </el-row>
      <el-form :inline="true" :model="getlist" ref="getlist" label-width="80px">
        <el-form-item label="学科">
          <el-select v-model="getlist.subject" @change="handlesubjectID">
            <el-option
              v-for="item in simpleData"
              :label="item.label"
              :value="item.value"
              :key="item.simpleData"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="二级目录">
          <el-select v-model="getlist.catalog" @change="handlesubjectID">
            <el-option
              v-for="item in directoryData"
              :value="item.value"
              :label="item.label"
              :key="item.labelSimple"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="标签">
          <el-select
            filterable
            v-model="getlist.tags"
            @change="handlesubjectID"
          >
            <el-option
              v-for="item in labelSimple"
              :label="item.label"
              :value="item.value"
              :key="item.labelSimple"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="关键字" prop="keyword">
          <el-input placeholder="请输入" v-model="getlist.keyword"></el-input>
        </el-form-item>

        <el-form-item label="试题类型">
          <el-select
            filterable
            v-model="getlist.questionType"
            @change="handlesubjectID"
          >
            <el-option
              v-for="item in questionTypeList"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="难度" prop="difficulty">
          <el-select
            filterable
            v-model="getlist.difficulty"
            @change="handlesubjectID"
          >
            <el-option
              v-for="item in difficultyList"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="方向">
          <el-select
            filterable
            v-model="getlist.direction"
            @change="handlesubjectID"
          >
            <el-option
              v-for="item in directionList"
              :label="item.direction"
              :value="item"
              :key="item.subjectList"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="录入人">
          <el-select
            filterable
            v-model="getlist.creatorID"
            @change="handlesubjectID"
          >
            <el-option
              v-for="item in creatorList"
              :label="item.creator"
              :value="item.username"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="题目备注" prop="beizhu">
          <el-input placeholder="题目备注" v-model="getlist.beizhu"></el-input>
        </el-form-item>

        <el-form-item label="企业简称" prop="shortName">
          <el-input
            placeholder="企业简称"
            v-model="getlist.shortName"
          ></el-input>
        </el-form-item>

        <el-form-item label="城市">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item prop="date1">
                <el-select
                  class="filter-item"
                  style="width: 110px"
                  v-model="getlist.province"
                  @keyup.enter="handleFilter"
                  @change="handleProvince"
                  filterable
                >
                  <el-option
                    v-for="item in citySelect.province"
                    :key="item"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-select
                class="filter-item"
                style="width: 110px"
                v-model="getlist.city"
                @keyup.enter="handleFilter"
                filterable
              >
                <el-option
                  v-for="item in citySelect.city"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>

        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-button size="small" type="info" @click="clickEmpty"
              >清除</el-button
            >
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="handleFilter"
              >搜索</el-button
            >
          </el-row>
        </el-col>
      </el-form>

      <!-- 审核信息 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 数据记录 -->
        <el-alert
          :title="`共 ${total} 条记录`"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        >
        </el-alert>
        <el-tab-pane ref="tableData" label="全部" name="全部">
          <questions-tabel :tableData="tableData"></questions-tabel>
        </el-tab-pane>
        <el-tab-pane label="待审核">
          <questions-tabel :tableData="tableData"></questions-tabel>
        </el-tab-pane>
        <el-tab-pane label="已审核">
          <questions-tabel :tableData="tableData"></questions-tabel>
        </el-tab-pane>
        <el-tab-pane label="已拒绝">
          <questions-tabel :tableData="tableData"></questions-tabel>
        </el-tab-pane>
      </el-tabs>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.getlist.page"
          :total="this.total"
          :page-size="this.getlist.pagesize"
          :page-sizes="[10, 20, 30, 50]"
          layout="sizes, prev, pager, next, jumper"
        ></el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { list as questionsLists, choice   } from '@/api/hmmm/questions.js'
import { simple as directorys  } from '@/api/hmmm/directorys.js'
import { simple  } from '@/api/hmmm/subjects.js'
import { simple as tags } from '@/api/hmmm/tags.js'
import { simple as creator } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import QuestionsTabel from '../components/questions-tabel.vue'
export default {
  name:'QuestionSchoice',
  components:{
      QuestionsTabel
  },
    data() {
      return {
        tableKey:0,
        labelPosition: 'right',
        activeName: '全部',
        dialogVisible: false,
        dis:false,
        total:null,
        alertText:'',
        total:0,
        tableData: [],
        simpleData:[],
        subjectList:[],
        directoryData:[],
        labelSimple:[],
        previewData:[],
        questionTypeList:[],
        difficultyList:[],
        directionList:[],
        creatorList:[],
        getlist:{
          page:1,
          pagesize:10,
          subject:'',
          catalog:'',
          tags:'',
          keyword:'',
          questionType:'',
          difficulty:'',
          direction:'',
          creator:'',
          remarks:'',
          remarks:'',
          remarks:'',
          city:''
        },
        citySelect:{
          province:[],
          city:[]
        },
        tabelArray:['全部','待审核','已审核','已拒绝']
      }
    },
  async created () {
    var _this = this
    this.getList()
    this.getSimple()
    this.handlesubjectID()
    this.getLabelSimple()
    this.getDirectorys()
    this.getCityData()
    this.getQuestionsList()
    this.questionTypeList = questionType
    this.difficultyList = difficulty
    this.directionList = direction
    const creatorList = await creator({ keyword: '' })
    this.creatorList = creatorList.data
    const {data:res} = await choice({...this.getlist}) 
    this.tableData = res.items
    this.total = res.counts
  },
  mounted() {
  },
 
  methods: {
    initialDate () {
      this.getList()
      this.handlesubjectID()
      this.handleClick()
    },
    async getList(){
      const { data: res } = await choice(this.getlist) 
      this.tableData = res.items
    },
    //标签列表
    async getLabelSimple(){
      const { data } = await tags(this.getlist) 
      this.labelSimple = data
    },
    //学科列表
    async getSimple(){
      const { data } = await simple(this.getlist) 
      this.simpleData = data
    },
    //目录列表
    async getDirectorys(){
      const { data } = await directorys(this.getlist) 
      this.directoryData = data
    },
    async getSimple(){
      const { data } = await simple(this.getlist) 
      this.simpleData = data
    },
    async handleClick(tab, event) {
      this.listLoading = false
        var tabs = null
        if(tab.label === '全部'){
          tabs = null
        }else if (tab.label === '待审核'){
          tabs = 0
        }else if (tab.label === '已审核'){
          tabs = 1
        }else {
          tabs = 2
        }

        const {data:res} = await choice({...this.getlist,chkState: tabs}) 
        this.tableData = res.items
        this.total = res.counts

    },
    async handlesubjectID(){
      const data = await choice(this.subjectList)
      this.subjectList = data.data.items
    },
    
    // 清空按钮
    clickEmpty(){
      this.getlist = this.$options.data().getlist
      this.$refs.getlist.resetFields()
    },
     // 搜索
    handleFilter () {
      this.getlist.page = 1
      this.getQuestionsList()
    },
    async getQuestionsList () {
      const result = await questionsLists(this.getlist)
      this.questionsList = result.data.items
      this.total = result.data.counts
    },
    // 数据条数的切换
    handleSizeChange (pagesize) {
      // 切换条数时,返回第一页
      this.getlist.page = 1
      this.getlist.pagesize = pagesize
      this.getQuestionsList()
    },
    // 当前页面的切换
    handleCurrentChange (page) {
      this.getlist.page = page
      this.getQuestionsList()
    },

    //获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },

    //获取市
     handleProvince: function (e) {
      this.citySelect.city = citys(e)
      this.getlist.city = this.citySelect.city[0]
    },

   

      // 显示信息条数
    handleSizeChange (val) {
      this.getlist.pagesize = val
      if (this.getlist.page === 1) {
        this.getList(this.getlist)
      }
    },
    // 加入某一页
    handleCurrentChange (val) {
      this.getlist.page = val
      this.getList()
    }
    
  },
  watch: {
    // 监听学科数据变化，请求对应目录和标签列表
    async 'getlist.subjectID' (val) {
      // 选择学科时，重置目录和标签
      this.getlist.catalogID = null
      this.getlist.tags = null
      this.directoryData = []
      this.labelSimple = []
      // 获取当前学科的目录和标签
      if (val) {
        // 清空操作时，阻止发送请求
        const directory = await directorys(val)
        this.directoryData = directory.data
        const results = await tags(val)
        this.labelSimple = results.data
      }
    },
    // 监听城市数据变化，获取对应的地区列表
    // 'getlist.province' (val) {
    //   // 选择城市时,清空地区
    //   this.getlist.city = null
    //   this.cityList = []
    //   // 获取当前城市的地区
    //   if (val) {
    //     // 清空操作，就不发送请求
    //     this.cityList = citys(val)
    //   }
    // }
  }
}
</script>


<style scoped lang='less'>
.container {
  margin: 10px;
}
div.el-dialog {
  margin: 0 auto !important;
  top: 50%;
  transform: translateY(-50%);
  // border-radius: 10px;
  // width: 500px;
  // height: 500px!important;
  .el-dialog__header {
    background: #f7f7f7;
    text-align: left;
    font-weight: 600;
  }
}
.d-flex > .el-select:not(:last-child) {
  margin-right: 10px;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
}
.el-form-item__label {
  font-weight: bold;
}
.el-select {
  width: 100%;
}
.el-form--inline .el-form-item {
  display: flex;
  flex: 25%;
  margin-right: 0px;
}
.el-input__inner {
  padding: 0 30px;
}
.el-form-item__content {
  flex: 1;
}
</style>
